<template>
  <div class="generalOperation clearfix" v-loading="loading">
    <div class="logoBg"><img src="~@/assets/images/common/fiveG.png" /></div>
    <div class="heading">
      {{ currentLvlName }}总体经营情况：<span class="redTitle"
        >{{ arriveTimeProcess }}
      </span>
    </div>
    <div class="content clearfix">
      <div class="generalOperationLeft">
        <div class="marBottom">
          <div class="img">
            <img src="~@/assets/images/common/basicBg.png" />
            <span class="imgNumber">{{ mainIncomeInfo.mainIncome }}
              <span class="unit">亿</span>
            </span>
          </div>
          <div class="inblock">
            <div class="inblockContent">
              <span class="title">主营收入完成</span><br />
              <span class="success">码号收入完成
                <span class="hint">{{ mainIncomeInfo.numberIncome }}亿元</span>
              </span>
              <span class="success">产业数字化收入完成
                <span class="hint">{{ mainIncomeInfo.industryIncome }}亿元</span>
              </span>
            </div>
          </div>
        </div>
        <div class="marBottom margin20">
          <div class="img">
            <img src="~@/assets/images/common/basicBg1.png" />
            <span class="imgNumber">{{ mainIncomeInfo.mainIncomeIncrease}}
              <span class="unit">%</span>
            </span>
          </div>
          <div class="inblock">
            <div class="inblockContent">
              <span class="title">主营收入增长</span><br />
              <span class="success">码号收入同比增长
                <span class="hint">{{ mainIncomeInfo.numberIncomeIncrease }}%</span>
              </span>
              <span class="success">产业数字化收入增长
                <span class="hint">{{ mainIncomeInfo.industryIncomeIncrease }}%</span>
              </span>
            </div>
          </div>
        </div>
        <div class="marBottom">
          <div class="img">
            <img src="~@/assets/images/common/basicBg.png" />
            <span class="imgNumber">{{ mainIncomeInfo.completeBudgetLj}}
              <span class="unit">%</span>
            </span>
          </div>
          <div class="inblock">
            <div class="inblockContent">
              <span class="title">累计预算完成进度</span><br />
              <span class="success">码号收入进度
                <span class="hint">{{ mainIncomeInfo.numberCompleteBudgetLj }}%</span>
              </span>
              <span class="success">产业数字化收入进度
                <span class="hint">{{ mainIncomeInfo.industryCompleteBudgetLj }}%</span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="generalOperationRight">
        <div class="rightContent">
          <div class="marBottom margin15">
            <div class="img">
              <span class="imgNumber">{{ mainDev.mobile.userIncreaseNet}}
                <span class="unit">万户</span>
              </span><br />
              <span class="success">(到达{{ mainDev.mobile.userArriveNet }}万户)</span>
            </div>
            <div class="inblock">
              <div class="inblockContent">
                <span class="title">移动净增用户</span><br />
                <span class="success" style="font-weight: 600">活跃净增
                  <span class="hint">{{ mainDev.mobile.active }}万户</span>
                </span>
                <span class="success">完成年度目标
                  <span class="hint">{{ mainDev.mobile.completeYearBudget }}%</span>
                </span>
              </div>
            </div>
          </div>
          <div class="marBottom margin20">
            <div class="img">
              <span class="imgNumber">{{mainDev.internet.userIncreaseNet}}
                <span class="unit">万户</span>
              </span><br />
              <span
                class="success"
                v-if="mainDev.fiveG.userArriveNet > 0"
                >(到达{{ mainDev.internet.userArriveNet }}万户)
              </span>
            </div>
            <div class="inblock">
              <div class="inblockContent">
                <span class="title">融合净增用户</span><br />
                <span class="success">完成年度目标
                  <span class="hint">{{ mainDev.internet.completeYearBudget }}%</span>
                </span>
              </div>
            </div>
          </div>
          <div class="marBottom">
            <div class="img">
              <span class="imgNumber">{{ mainDev.fiveG.userIncreaseNet }}
                <span class="unit">万户</span>
              </span><br />
              <span
                class="success"
                v-if="mainDev.fiveG.userArriveNet > 0"
                >(到达{{ mainDev.fiveG.userArriveNet }}万户)
              </span>
            </div>
            <div class="inblock">
              <div class="inblockContent">
                <span class="title">5G终端用户净增</span><br />
                <span class="success">完成年度目标
                  <span class="hint">{{ mainDev.fiveG.completeYearBudget }}%</span>
                </span>
                <span class="success">渗透率达到
                  <span class="hint">{{ mainDev.fiveG.thanLastYearRate }}%</span>
                </span>
              </div>
            </div>
          </div>
          <div class="marBottom margin15" style="display: flex;padding-left: 20px">
            <div class="progress">
              <el-progress 
                type="circle" 
                :percentage="mainDev.ydgw.overNetUserPortion || 0" 
                :width="80"
                :height="80" 
                color='#c00000' 
              />
            </div>
            <div class="inblock" style="margin: 0;">
              <div class="inblockContent" style="border-left: 0">
                <span class="title" style="font-size: 16px">移动过网用户份额到达</span><br>
                <span class="success">较上年末<span class="hint" style="color:rgb(61, 61, 255);">{{'提升'}}{{mainDev.ydgw.thanLastYearRate}}pp</span></span>
              </div>
            </div>
          </div>
        </div>
        <div class="rightContent rightProcess">
          <div class="marBottom margin15">
            <div class="img">
              <span class="imgNumber">
                {{ mainDev.broadHand.userIncreaseNet}}<span class="unit">万户</span>
              </span><br />
              <span class="success">(到达{{ mainDev.broadHand.userArriveNet }}万户)</span>
            </div>
            <div class="inblock">
              <div class="inblockContent">
                <span class="title">宽带净增用户</span><br />
                <span class="success" style="font-weight: 600">活跃净增
                  <span class="hint">{{ mainDev.broadHand.active }}万户</span>
                </span>
                <span class="success">完成年度目标
                  <span class="hint">{{ mainDev.broadHand.completeYearBudget }}%</span>
                </span>
              </div>
            </div>
          </div>
          <div class="marBottom margin20">
            <div class="img">
              <span class="imgNumber">{{ mainDev.rhGt.userIncreaseNet}}
                <span class="unit">万户</span>
              </span><br />
              <span
                class="success"
                v-if="mainDev.rhGt.userArriveNet > 0"
                >(到达{{ mainDev.rhGt.userArriveNet }}万户)
              </span>
            </div>
            <div class="inblock">
              <div class="inblockContent">
                <span class="title">融合高套净增</span><br />
                <span class="success">完成年度目标
                  <span class="hint">{{ mainDev.rhGt.completeYearBudget }}%</span>
                </span>
              </div>
            </div>
          </div>
          <div class="marBottom">
            <div class="img">
              <span class="imgNumber">{{ mainDev.qz.userIncreaseNet }}
                <span class="unit">万户</span>
              </span><br />
              <span
                class="success"
                v-if="mainDev.qz.userArriveNet > 0"
                >(到达{{ mainDev.qz.userArriveNet }}万户)
              </span>
            </div>
            <div class="inblock">
              <div class="inblockContent">
                <span class="title">千兆净增</span><br />
                <span class="success">
                  完成年度目标
                  <span class="hint">{{ mainDev.qz.completeYearBudget }}%</span>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="tips">移动净增/宽带净增完成率=min(用户净增完成率,活跃净增完成率)</div>
        <div class="cloLine"></div>
      </div>
      <div class="centerLine">
        <div class="colLine">
          <img src="~@/assets/images/common/trend.png" />
          <span class="colYear">{{ acctYear }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
export default {
  name: "generalOperation",
  props: {
    form: {
      type: Object,
      default: {},
    }
  },
  data() {
    return {
      loading: false,
      number: 10,
      progressNum: 60,
      currentLvlName: "",
      arriveTimeProcess: "",
      acctMonth: "",
      acctYear: "",
      incomeComplete: {},
      mainIncomeInfo: {
        title: "",
      },
      userDev: {
        arriveMobile: {},
        fiveG: {},
        arriveInternet: {},
        arriveBroadhand: {},
      },
      mainDev: {
        broadHand: {},
        mobile: {},
        fiveG: {},
        internet: {},
        qz: {},
        rhGt: {},
        ydgw: {},
      },
    };
  },
  created(){
    
  },
  methods: {
    getData() {
      this.loading = true;
      $budgetAPI.getCountyOperationPageOne(
        { token: this.form.token, areaId: this.form.areaId, acctMonth: this.form.month },
        (res) => {
          if (res && res.code == 0){

          }
          this.arriveTimeProcess = res.content.arriveTimeProcess;
          this.acctYear =
            res.content.currentMonth.substr(0, 4) +
            "年" +
            res.content.currentMonth.substr(4, 6) +
            "月";
          this.acctMonth = res.content.currentMonth.substr(5, 6) + "月";
          this.mainIncomeInfo = res.content.mainIncomeInfo;

          this.mainDev = res.content.mainDev;

          this.currentLvlName = res.content.currentLvlName;

          this.loading = false;
        },
        (err) => {
          this.loading = false;
        }
      );
    },
    getTitle(val, up, down, obj) {
      if (val > 0) {
        obj.title = up;
      } else if (val == "" || val == null) {
        val = "";
        obj.title = up;
      } else {
        val = -val;
        obj.title = down;
      }
      return val;
    },
  },
};
</script>

<style  lang="scss" scoped>
.generalOperation {
  page-break-inside: avoid;
  padding: 20px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  position: relative;

  .generalOperation.clearfix:after,
  .generalOperation.clearfix:before {
    content: "";
    display: table;
  }
  .generalOperation.clearfix:after {
    clear: both;
  }
  .logoBg {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .generalOperation.clearfix {
    *zoom: 1;
  }
  .heading {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    padding-bottom: 40px;
    .redTitle {
      color: #c00000;
    }
  }
  .content {
    position: relative;
    .content.clearfix:after,
    .content.clearfix:before {
      content: "";
      display: table;
    }
    .content.clearfix:after {
      clear: both;
    }
    .generalOperationLeft {
      width: 32%;
      display: block;
      position: relative;
      float: left;

      .marBottom {
        margin-bottom: 15px;
      }
      .margin20 {
        margin-bottom: 40px;
      }

      .img {
        position: relative;
        display: inline-block;
        .imgNumber {
          position: absolute;
          width: 120px;
          top: 50%;
          left: 0;
          text-align: center;
          transform: translateY(-50%);
          font-size: 26px;
          font-weight: 700;
          color: white;
          .unit {
            font-size: 16px;
          }
        }
      }

      .inblock {
        display: inline-block;
        margin-left: 10px;
        // position: relative;
        // top:-5px;
        .inblockContent {
          display: table-cell;
          vertical-align: middle;
          padding-left: 15px;
          border-left: 1px solid #c0c4cc;
          height: 80px;
          position: relative;
          top: -7px;
          .title {
            display: inline-block;
            font-size: 18px;
            font-weight: 700;
          }
          .success {
            display: block;
            margin-top: 10px;
            font-size: 12px;
            font-weight: 600;
            .hint {
              color: #c00000;
            }
          }
        }
      }
    }

    .generalOperationRight {
      width: 60%;
      float: right;
      position: relative;
      top: 10px;
      .tips {
        position: absolute;
        top: 43%;
        width: 100%;
        text-align: center;
      }
      .cloLine {
        position: absolute;
        top: 48%;
        width: 100%;
        height: 2px;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0) 10%,
          rgba(150, 193, 234, 0.3) 20%,
          rgba(150, 193, 234, 0.4) 30%,
          rgba(150, 193, 234, 0.5) 40%,
          rgba(150, 193, 234, 0.8) 50%,
          rgba(150, 193, 234, 0.5) 60%,
          rgba(150, 193, 234, 0.4) 70%,
          rgba(150, 193, 234, 0.3) 80%,
          rgba(0, 0, 0, 0) 90%,
          rgba(0, 0, 0, 0) 100%
        );
      }
      .rightContent {
        width: 50%;
        display: inline-block;
        &:nth-child(2){
          .img {
            left: -30px;
          }
        }
      }
      .rightProcess {
        width: 45%;
        float: right;
        .marBottom {
          position: relative;
          top: -10px;
        }
      }

      .marBottom {
        height: 100px;
        position: relative;
      }
      .margin20 {
        margin-bottom: 40px;
      }
      .margin15 {
        margin-bottom: 15px;
      }
      .rightProcess {
        .inblock {
          margin-left: 90px;
        }
        .progress {
          display: inline-block;
          position: absolute;
        }
      }

      .img {
        display: inline-block;
        text-align: center;
        height: 80px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        .imgNumber {
          font-size: 26px;
          font-weight: 700;
          width: 120px;
          display: inline-block;
          color: rgb(26, 100, 124);
          .unit {
            font-size: 16px;
          }
        }
        .success {
          display: inline-block;
          margin-top: 15px;
          font-size: 12px;
          font-weight: normal;
        }
      }
      .inblock {
        display: inline-block;
        margin-left: 10px;
        margin-left: 120px;
        .inblockContent {
          vertical-align: middle;
          padding-left: 15px;
          border-left: 1px solid #c0c4cc;
          height: 80px;

          padding-top: 10px;
          .title {
            display: inline-block;
            font-size: 18px;
            font-weight: 700;
          }
          .success {
            display: block;
            margin-top: 10px;
            font-size: 12px;
            font-weight: normal;
            .hint {
              color: #c00000;
            }
          }
        }
      }
    }
    .centerLine {
      width: 8%;
      position: absolute;
      height: 100%;
      left: 32%;
      &:before {
        content: "";
        position: absolute;
        top: 0%;
        left: calc(50% - 1px);
        width: 2px;
        height: calc(50% - 45px);
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0) 10%,
          rgba(150, 193, 234, 0.2) 20%,
          rgba(150, 193, 234, 0.3) 30%,
          rgba(150, 193, 234, 0.4) 40%,
          rgba(150, 193, 234, 0.5) 50%,
          rgba(150, 193, 234, 0.6) 60%,
          rgba(150, 193, 234, 0.7) 70%,
          rgba(150, 193, 234, 0.8) 80%,
          rgba(150, 193, 234, 0.9) 90%,
          rgba(150, 193, 234, 1) 100%
        );
      }
      &:after {
        content: "";
        position: absolute;
        bottom: 0%;
        left: calc(50% - 1px);
        width: 2px;
        height: calc(50% - 45px);
        background: linear-gradient(
          to bottom,
          rgba(150, 193, 234, 1) 0% rgba(150, 193, 234, 0.9) 10%,
          rgba(150, 193, 234, 0.8) 20%,
          rgba(150, 193, 234, 0.7) 30%,
          rgba(150, 193, 234, 0.6) 40%,
          rgba(150, 193, 234, 0.5) 50%,
          rgba(150, 193, 234, 0.4) 60%,
          rgba(150, 193, 234, 0.3) 70%,
          rgba(150, 193, 234, 0.2) 80%,
          rgba(150, 193, 234, 0.1) 90% rgba(0, 0, 0, 0) 0%
        );
      }
      .colLine {
        position: absolute;
        left: calc(50% - 45px);
        top: 50%;
        width: 90px;
        height: 90px;
        border: 2px solid #c00000;
        border-radius: 100%;
        transform: translateY(-50%);
        img {
          width: 40px;
          margin-top: 17px;
          margin-left: 20px;
        }
        .colYear {
          color: #c00000;
          font-size: 10px;
          margin-left: 13px;
          display: block;
        }
      }
    }
  }
}
</style>
